<template>
  <div class="shopmenu">
    <TopSubfield></TopSubfield>
    <div class="menucont">
      <ul>
        <li v-for="item in menuobj" :key="item.id" @click="handItem(item.id)">{{item.text}}</li>
      </ul>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import TopSubfield from "@/components/top/TopSubfield";
import Footer from "@/components/bottom/footer";
export default {
  name: "shopmenu",
  data() {
    return {
      menuobj: [
        {
          id: 0,
          text: "店铺管理",
          imgUrl: ""
        },
        {
          id: 1,
          text: "商品管理",
          imgUrl: ""
        },
        {
          id: 2,
          text: "账户管理",
          imgUrl: ""
        },
        {
          id: 3,
          text: "订单管理",
          imgUrl: ""
        }
      ]
    };
  },
  components: {
    TopSubfield,
    Footer
  },
  methods: {
    handItem(val) {
      console.log(val);
    }
  }
};
</script>

<style lang="less">
.shopmenu {
  .menucont {
    width: 70%;
    margin: 20px auto;
    min-height: 700px;
    ul {
      width: 100%;
      li {
        width: 20%;
        height: 700px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 60px;
        color: #67c23a;
        border: 2px solid #409eff;
        float: left;
        border-radius: 20px;
        writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
        writing-mode: tb-lr; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
      }
      li:hover{
        color:  #409eff;
        font-size: 90px;
      }
      li:nth-child(1),
      li:nth-child(2),
      li:nth-child(3) {
        margin-right: 5%;
      }
    }
  }
}
</style>




